<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>借阅列表</title>
    <div th:replace="/include/home-head-include"></div>
</head>
<body>

<br>

<div class="container">
    <div th:replace="./include/home-nav-include"></div>
    <div th:replace="./include/home-banner-include"></div>
    <div class="row">
        <div class="col">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">书名</th>
                    <th scope="col">封皮</th>
                    <th scope="col">借阅人</th>
                    <th scope="col">借阅时间</th>
                    <th scope="col">是否归还</th>
                    <th scope="col">状态</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="borrow,start:${borrows}">
                    <td th:text="${start.index+1}"></td>
                    <td th:text="${borrow.bookVO.bookname}"></td>
                    <td><img height="50px" th:src="${borrow.bookVO.image}" alt=""></td>
                    <td th:text="${borrow.userVO.username}"></td>
                    <td th:text="${#dates.format(borrow.borrowTime, 'yyyy-MM-dd')}"></td>
                    <td th:text="${borrow.isReturn?'是':'否'}"></td>
                    <td th:text="${borrow.isUrged?'正常':'被催还中'}"></td>
                    <td><a href="javascript:void(0)" th:data-id="${borrow.borrowId}" onclick="returnBook(this)">还书</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function returnBook(e) {
        var borrowId = $(e).attr('data-id');
        $.ajax({
            url: '/borrows/return',
            type: 'post',
            data: {
                borrowId: borrowId
            },
            success: function (data) {
                alert("还书成功");
                location.reload()
            }
        })
    }
</script>

</body>
</html>